<template>
	<NavBarVue :title="'我的'" />
	<view class="myBox">
		<u-popup :show="show" mode="left" @close="openClose">
			<view style="width: 280px;height: 100%;">
				<view
					class="popup-image">
					<view style="width: 100px;height: 100px;overflow: hidden;" @click="toEditUserInfo">
						<base-cover-image :src="userStore.userInfo.userInfos?.userNickPicture" mode="aspectFill" />
					</view>
					<view style="margin-top: 10px;">{{userStore.userInfo.userInfos?.nickName || '暂无昵称'}}</view>
				</view>
				<view style="width: 100%;overflow: hidden;">
					<view class="popup-box" v-for="(item) in upopupData" :key="item.key">
						<u-icon :name="item.iconName" size="26"></u-icon>
						<view
							class="popup-box-child"
							@click="handleClick(item.eventName)"
						>{{item.tagName}}</view>
					</view>
					<view class="layout">
						<button @click="out">退出登录</button>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 头部 -->
		<view class="myLog">
			<view class="lefticon" @click="openClose">
				<u-icon name="list" color="#ddd" size="25"></u-icon>
			</view>
			<view class="head">
				<view class="head_left">
					<view style="width: 80px;height: 80px;border-radius: 50%;overflow: hidden;">
						<base-cover-image :src="userStore.userInfo.userInfos?.userNickPicture" mode="aspectFill" />
					</view>
					<view style="color: #aaa;margin-top: 10px;">{{userStore.userInfo.userInfos?.introduction}}</view>
				</view>
				<view class="head_right">
					<view>{{userStore.userInfo.userInfos?.nickName || '您还没有设置昵称'}}</view>
					<view style="color: #aaa;margin-top: 6px;">笔记ID：<text>{{userStore.userInfo.userInfos?.unionId}}</text></view>
					<view style="color: #aaa;margin-top: 6px;">IP属地：<text>{{userStore.userInfo.userInfos?.ipAddress}}</text></view>
				</view>
			</view>
			<view class="head_bot">
				<view class="bot_left">
					<view 
						style="display: flex;flex-direction: column;justify-content: center;align-items: center;" 
						v-for="(item) in atten_list"
						:key="item.type"
						@click="toTabOther(item.type)"
					>
						<view style="color: #fff;">{{item.num}}</view>
						<text style="color: #bbb;font-size: 12px;margin-top: 5px;">{{item.text}}</text>
					</view>
				</view>
				<view class="bot_right">
					<button class="btn" @click="toEditUserInfo">编辑资料</button>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="main_tab">
				<u-tabs :list="tab_list" @click="tabList"></u-tabs>
			</view>
			<view class="pubu" v-if="pageResults.length">
				<ShowIndex v-if="articleStore.articleListData.objects.length" :dataList="pageResults"/>
				<WaterfallLikeVue v-else :dataList="pageResults"/>
			</view>
			<view class="pubu data" v-else>
				暂无数据~~~
			</view>
		</view>
	</view>
	<TabBarVue type="mine" />
</template>

<script setup>
	import {
		computed,
		onMounted,
		reactive,
		ref,
	} from 'vue'
	import { onShow } from "@dcloudio/uni-app"
	import {
		useUserStore,
		useArticleStore
	} from '@/store'
	import WaterfallLikeVue from '@/components/Waterfall_like.vue';
	import ShowIndex from '@/components/ShowIndex.vue';
	const tab_list = [{
		name: '笔记',
	}, {
		name: '收藏',
	}, {
		name: '点赞'
	}]
	// 渲染关注，粉丝，获赞量
	const atten_list = reactive([
		{
			num: 25,
			text: '关注',
			type: 'attention',
			url: '/pages/tab-mine/attention-fan/index'
		},
		{
			num: 25,
			text: '粉丝',
			type: 'fans',
			url: '/pages/tab-mine/attention-fan/index'
		},
		{
			num: 25,
			text: '获赞和评论',
			type: 'comment',
			url: '/pages/tab-mine/comment/index'
		}
	])
	
	const upopupData = reactive([
		{
			id: 1,
			iconName: 'rmb-circle',
			tagName: '优惠劵',
			eventName: 'toDiscount'
		},
		{
			id: 2,
			iconName: 'scan',
			tagName: '扫一扫',
			eventName: 'toScan'
		},
		{
			id: 3,
			iconName: 'heart',
			tagName: '个人标签',
			eventName: 'toIdentityTag'
		},
		{
			id: 4,
			iconName: 'setting',
			tagName: '系统设置',
			eventName: 'toSystemEdit'
		}
	])
	
	const handleClick = (eventName) => {
		console.log(eventName, "|eventName");
		switch(eventName) {
			case 'toDiscount':
				toDiscount()
				return
			case 'toScan':
				toScan()
				return
			case 'toIdentityTag':
				toIdentityTag()
				return
			case 'toSystemEdit':
				toSystemEdit()
				return
			default:
				return
		}
	}
	// 抽屉
	const show = ref(false)
	// 打开弹框
	const openClose = () => {
		show.value = !show.value
	}
	const toDiscount = () => {
		uni.navigateTo({
			url: "/pages/tab-mine/drawer/discount"
		})
	}
	const toScan = () => {
		uni.scanCode({
			success: () => {
				uni.showToast({
					title: '扫描成功'
				})
			}
		})
	}
	const toIdentityTag = () => {
		uni.navigateTo({
			url: "/pages/tab-mine/drawer/identity-tag"
		})
	}

	const toSystemEdit = () => {
		uni.showToast({
			title: '系统设置'
		})
	}
	
	// 跳转到点赞，粉丝和获赞、评论
	const toTabOther = (type) => {
		let url = ''
		for (let s of atten_list) {
			if(s.type === type) {
				url = s.url
			}
		}
		uni.navigateTo({
			url
		})
	}

	// 编辑用户资料
	const toEditUserInfo = () => {
		uni.navigateTo({
			url: '/pages/tab-mine/edit-userInfo/index'
		})
	}

	const userStore = useUserStore()
	const articleStore = useArticleStore()
	const itemIndex = ref(0)
	const pageResults = computed(() => {
		console.log(articleStore, "| articleStore");
		switch(itemIndex.value) {
			case 0:
				return articleStore.personalListData?.objects
			case 1:
				return articleStore.pageResults.data?.collectFutureOPageResult?.objects
			case 2:
				return articleStore.pageResults.data?.likeFuturePageResult?.objects
			default:
				return []
		}
	})
	onShow(async () => {
		await userStore.getUserDetail()
		// userInfos.value = userStore.userInfo.userInfos
		const res = await articleStore.articleGetBehaviorList({
			page: 1,
			pageSize: 10
		})
		const resLoacation = await uni.getLocation({
			type: 'wgs84',
		});
		await articleStore.articleList({
			latitude: resLoacation.latitude,
			longitude: resLoacation.longitude,
			page: 1,
			pageSize: 10,
			source: 1,
			userId: userStore.userInfo.userInfos.id
		})
		atten_list[2].num = articleStore.articleListData.objects.reduce((prev, next) => {
			return prev += next.likeCount
		}, 0)
		atten_list[0].num = articleStore.articleListData.objects.reduce((prev, next) => {
			return prev += next.favoriteCount
		}, 0)
	})
	// 切换Tab状态
	const tabList = (item) => {
		itemIndex.value = item.index
	}
	
	// 退出登录
	const out = () => {
		uni.removeStorageSync('userInfo')
		uni.removeStorageSync('locationData')
		uni.navigateTo({
			url: "/pages/login/index"
		})
	}
</script>

<style scoped lang="scss">
	.myBox {
		width: 100vw;
		height: 100vh;
		.popup-image {
			width: 100%; 
			height: 200px;
			margin-top: 65px; 
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction:column;
		}
		.popup-box {
			width: 100%;
			height: 50px;
			display: flex;
			align-items: center;
			padding-left: 10px;
			.popup-box-child {
				flex: 1;
				height: 100%;
				border-bottom: 1px solid #eee;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-left: 10px;
			}
		}
	}


	.lefticon {
		width: 100%;
		height: 40px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-left: 17px;
	}

	.myLog {
		width: 100%;
		height: 580rpx;
		background: rgb(77, 83, 124);
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}

	.head {
		width: 100%;
		/* height: 130px; */
		display: flex;
	}

	.head_left {
		width: 100px;
		height: 100%;
		margin-left: 10px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
	}

	.head_right {
		flex: 1;
		margin-top: 17px;
		margin-left: 5px;
		color: #fff;
	}

	.head_bot {
		margin-bottom: 80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.bot_left {
		width: 200px;
		height: 100%;
		display: flex;
		/* background: salmon; */
		justify-content: space-evenly;
	}

	.bot_right {
		display: flex;
		justify-content: center;
		align-items: center;

		.btn {
			width: 100px;
			height: 40px;
			border-radius: 20px;
			line-height: 40px;
			margin-right: 10px;
			background: rgb(115, 121, 161);
			color: #ddd;
			font-size: 14px;
		}
	}

	.main {
		width: 100%;
		/* height: 500px; */
		/* background: sandybrown; */
		margin-top: -30px;
	}

	.main_tab {
		width: 100%;
		height: 50px;
		background: #fff;
		border-radius: 12px 12px 0px 0px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.main_li {
		width: 100%;
		/* height: 200px; */
		/* background: seashell; */
		text-align: center;
	}

	.pubu {
		width: 100%;
		/* height: 300px; */
		height: auto;
		display: flex;
		justify-content: space-evenly;
		&.data {
			color: #b4b4b4
		}
	}

	.left {
		width: 46vw;
		height: auto;
		margin-right: 2vw;
	}

	.left .ul {
		width: 100%;
		height: auto;
	}

	.left .ul .li {
		font-size: 14px;
		width: 100%;
		height: auto;
		overflow: hidden;

	}

	.tx {
		width: 100%;
		height: 40px;
		box-sizing: border-box;
		padding: 0px 10px;
		margin-top: 10px;
	}

	.nr {
		box-sizing: border-box;
		padding: 0px 10px;
	}

	.ttt {
		width: 100%;
		height: 220px;
	}

	.tt {
		width: 100%;
		height: 200px;
	}
	
	.layout {
		box-sizing: border-box;
		padding: 80rpx 60rpx 0rpx;
		button {
			border-radius: 30rpx;
		}
	}
</style>